import {
  ScrollView,
  View,
  Text,
  TouchableHighlight,
  Image,
  StyleSheet,
} from 'react-native';
import Screen from '../../common/screen/Screen';
import React, {Component} from 'react';
import IconFA from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/Ionicons';

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      days: [
        {
          title: '图表',
          isFA: true,
          icon: 'bar-chart-o',
          size: 48,
          color: '#ff856c',
          comp: 'chart',
        },
        {
          title: '布局',
          isFA: true,
          icon: 'th',
          size: 60,
          color: '#90bdc1',
          comp: 'layout',
        },
        {
          title: '表格',
          isFA: true,
          icon: 'table',
          size: 50,
          color: '#2aa2ef',
          comp: 'table',
        },
        {
          title: '表单',
          isFA: true,
          icon: 'wpforms',
          size: 50,
          color: '#5e2a06',
          comp: 'form',
        },
        {
          title: '地图',
          isFA: true,
          icon: 'map-marker',
          size: 50,
          color: '#FF9A05',
          comp: 'map',
        },
        {
          title: '扫码',
          isFA: true,
          icon: 'barcode',
          size: 50,
          color: '#37465c',
          comp: 'barCode',
        },
      ],
    };
  }

  componentDidMount() {}

  render() {
    let _this = this;
    var boxs = this.state.days.map(function (elem, index) {
      return (
        <TouchableHighlight
          key={index}
          style={[
            styles.touchBox,
            index % 3 === 2 ? styles.touchBox2 : styles.touchBox1,
          ]}
          underlayColor="#eee"
          onPress={() => {
            if (elem.comp) {
              _this.props.navigation.navigate(elem.comp);
            }
          }}>
          <View style={styles.boxContainer}>
            <Text style={styles.boxText}>{elem.title}</Text>
            {elem.isFA ? (
              <IconFA
                size={elem.size}
                name={elem.icon}
                style={[styles.boxIcon, {color: elem.color}]}
              />
            ) : (
              <Icon
                size={elem.size}
                name={elem.icon}
                style={[styles.boxIcon, {color: elem.color}]}
              />
            )}
          </View>
        </TouchableHighlight>
      );
    });
    return (
      <ScrollView>
        <View style={styles.touchBoxContainer}>{boxs}</View>
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  touchBoxContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: Screen.size.width,
    borderTopWidth: Screen.pixel,
    borderTopColor: '#ccc',
  },
  touchBox: {
    width: Screen.size.width / 3 - 0.33334,
    height: Screen.size.width / 3,
    backgroundColor: '#fff',
  },
  touchBox1: {
    borderBottomWidth: Screen.pixel,
    borderBottomColor: '#ccc',
    borderRightWidth: Screen.pixel,
    borderRightColor: '#ccc',
  },
  touchBox2: {
    borderBottomWidth: Screen.pixel,
    borderBottomColor: '#ccc',
  },
  boxContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    width: Screen.size.width / 3,
    height: Screen.size.width / 3,
  },
  boxIcon: {
    position: 'relative',
    top: -10,
  },
  boxText: {
    position: 'absolute',
    bottom: 15,
    width: Screen.size.width / 3,
    textAlign: 'center',
    left: 0,
    backgroundColor: 'transparent',
  },
});
